React 使用Redux简化数据传递实现及原理

#React 使用Redux简化数据传递实现及原理| 来源: 网络整理| 查看: 265

一、概念

Redux简化数据传递

左侧是没有数据框架的传值，右侧则是使用Redux简化后传值。

所有值全部放在store管理，一个组件改变了store的内容，

其他组件就会感知到来取数据，间接实现数据传递功能。

二、Redux工作流程原理

图书馆借书例子

dispatch(action) 要借书的话

Store(state,action) 找到借书的人

Reducers 借书的人查看记录本

借书流程：dispatch→Store→Reducers→Store→Components

三、通过redux实现antdList的添加删除功能

antd实现详解地址：https://mp.csdn.net/postedit/102660910

创建store文件夹下 index 和 reducer

index.js 为 (store)

//store 存数据传递reducer处理 import {createStore} from 'redux'; import reducer from './reducer'; import React from "react"; //window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 为 redux devtools工具配置 const store=createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); export default store;

reducer.js 为（处理store）

//reducer可以接收state但是不能修改state //处理数据 //defaultState store默认值 const defaultState={ inputValue:'123', list:[1,2] } //state上一次存储的数据 //action传过来改变的 export default (state=defaultState,action)=>{ console.log(state,action); if(action.type==='change_input_value'){ //复制一份数据 const newState=JSON.parse(JSON.stringify(state)) newState.inputValue=action.value; return newState; } //添加到列表 if(action.type==='add_todo_item'){ const newState=JSON.parse(JSON.stringify(state)) newState.list.push(newState.inputValue); newState.inputValue=''; return newState; } //删除点击列表内容 if(action.type==='delete_todo_item'){ const newState=JSON.parse(JSON.stringify(state)) newState.list.splice(action.index,1); return newState; } return state; }

pages 创建antdList

import React from 'react'; import ShowList from '../components/ShowList'; export default function() { return ( ); }

components 创建 ShowList 提交和点击列表则触发（action）并且监听store返回的数据

import React,{ Component } from 'react'; import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' import { Input,Button,List } from 'antd'; import store from '../store'; //全局数据 // const data = [ // 'Racing car sprays burning fuel into crowd.', // 'Japanese princess to wed commoner.', // 'Australian walks 100km after outback crash.', // 'Man charged over missing wedding girl.', // 'Los Angeles battles huge wildfires.', // ]; class showList extends Component{ constructor(props){ super(props); //创建数据 console.log(store.getState()); this.state=store.getState(); this.handleInputChange=this.handleInputChange.bind(this); this.handleStoreChange=this.handleStoreChange.bind(this); this.handleBtnClick=this.handleBtnClick.bind(this); //监听返回组件的数据，并且同步数据。 store.subscribe(this.handleStoreChange); } render(){ return( {width:'300px', marginRight:'10px'}} onChange={this.handleInputChange}/> {/*antd button按钮*/} 提交 {/*列表*/} {marginTop:'10px',marginLeft:'10px'}}> {/*antd Input文本框*/} {marginTop:'10px',width:'300px'}} bordered dataSource={this.state.list} renderItem={(item,index) => ( {item} )} /> ) } //action handleInputChange(e){ /* const action={ type:CHANGE_INPUT_VALUE, value:e.target.value };*/ const action=getInputChangeAction(e.target.value); //action传递到store store.dispatch(action); } //点击提交添加到列表 handleBtnClick(){ /* const action={ type:ADD_TODO_ITEM };*/ const action= getAddItemAction(); store.dispatch(action); } //删除列表点击的内容 handleItemDelete(index){ // const action={ // type:DELETE_TODO_ITEM, // index:index // } const action= getDeleteItemAction(index); store.dispatch(action); } //同步数据 handleStoreChange(){ this.setState(store.getState) } } export default showList;

四、测试最终效果

【本文地址】

公司简介

联系我们